<template>
<view class="page">
	<view class="header-box">
		<view class="icon-nav" @click="goBack"></view>
		<view class="search-box">
			<picker class="goods-item" @change="typeBtn" range-key="name" :range="typeArr">
				{{type_label}} <text class="icon-tri"></text>
			</picker>
			<view class="line"></view>
			<input type="text" value="" placeholder="请输入商品..." class="header-input" v-model="title"  @confirm="goSearch"/>
		</view>
	</view>
	<view class="content-box">
		<view class="content-title">
			历史搜索
		</view>
		<view class="content">
			<view class="label" @click="searchList(a)" v-for="(a,i) in historyArr" :key="i">
				{{a}}
			</view>
		</view>
		<!-- <view class="content-title mt50">
			热门搜索
		</view>
		<view class="content">
			<view class="label" v-for="(a,i) in hotArr" :key="i">
				{{a}}
			</view>
		</view> -->
	</view>
</view>
</template>

<script>
	export default {
		data(){
			return {
				typeArr:[{name:'商品'},{name:'商户'}],
				type_label:'商品',
				historyArr:[],
				hotArr:['棉服','裤子','蓝牙音箱','电脑'],
				
				title: '',
				urlType: ''
			}
		},
		onShow() {
			this.getHistory()
		},
		onLoad(e) {
			this.urlType = e.url;
			this.type_label = e.type_label
		},
		methods: {
			typeBtn(event){
				var value = event.detail.value;
				this.type_label = this.typeArr[value].name;
			},
			
			goSearch(){
				this.historyArr.push(this.title)
				uni.setStorageSync('getHistory', this.historyArr)
				switch (this.type_label) {
					case '商品':
						uni.navigateTo({
							url:'./searchRes?title=' + this.title + '&url=' + this.urlType
						})
						break;
					case '商户':
						uni.navigateTo({
							url:'./merchants?title=' + this.title + '&url=' + this.urlType
						})
						break;
				}
			},
			
			// 获取本地储存信息，如没有，则创建一个储存地
			getHistory () {
				const history = uni.getStorageSync('getHistory')
				if (history) {
					this.historyArr = history;
				} else {
					uni.setStorageSync('getHistory', [])
				}
			},
			
			// 跳转搜索页
			searchList(e) {
				switch (this.type_label) {
					case '商品':
						uni.navigateTo({
							url:'./searchRes?title=' + e + '&url=' + this.urlType
						})
						break;
					case '商户':
						uni.navigateTo({
							url:'./merchants?title=' + e + '&url=' + this.urlType
						})
						break;
				}
			},
			
			// 返回上一页
			goBack () {
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped lang="scss">
	.icon-tri{
		display: inline-block;
		vertical-align: middle;
		width: 0;
		height: 0;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		border-top: 5px solid #cdcdcd;
		margin-left:20rpx;
	}
	.mt50{margin-top: 50rpx;}
	.header-box{
		display: flex;
		padding:50rpx 30rpx 20rpx;
		@include  bgGradient();
		height: 80rpx;
		position: relative;
		line-height: 80rpx;
		position: relative;
		align-items: center;
		justify-content: center;
		.icon-nav{
			position: absolute;
			top:60%;
			left: 30rpx;
			transform: translateY(-50%) rotate(-45deg);
			border-top:1px solid #FFF;
			border-left:1px solid #FFF;
			width: 20rpx;
			height: 20rpx;
			flex:0;
		}
		.search-box{
			display: flex;
			background: #FFFFFF;
			height: 70rpx;
			line-height: 70rpx;
			border-radius: 35rpx;
			.line{
				width: 4rpx;
				height: 50rpx;
				background-color: #EFEFEF;
				position: relative;
				top:50%;
				transform: translateY(-50%);
			}
			.goods-item{
				width: 140rpx;
				height: 70rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #333333;
			}
			.header-input{
				flex:1;
				background: url('/static/images/mallShop/search.png') no-repeat 10px center;
				background-size:26rpx 26rpx;
				padding-left: 80rpx;
				height: 70rpx;
				color: #333333;
			}
		}
	}
	.content-box{
		padding:40rpx 30rpx;
		.content-title{
			font-size: 32rpx;
			color: #666666;
		}
		.content{
			display: flex;
			flex-wrap: wrap;
			margin-top: 30rpx;
			.label{
				min-width: 70rpx;
				padding: 12rpx 25rpx;
				margin-bottom: 30rpx;
				text-align: center;
				border-radius: 50rpx;
				background-color: #FFFFFF;
				margin-right:30rpx;
				font-size: 30rpx;
			}
		}
	}
</style>
